<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>设备管理</el-breadcrumb-item>
      <el-breadcrumb-item>增删设备</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="Addordelete_div">
      <el-form>
        <el-form class="Addordelete_box1">
          <p>添加设备</p>
          <el-form ref="form" :model="form" label-width="90px">
            <el-form-item label="设备名">
              <el-input
                v-model="form.shebeiid"
                placeholder="注意设备名不能与现有设备名相同"
              ></el-input>
            </el-form-item>
            <el-form-item label="数值单位">
              <el-input
                v-model="form.company"
                placeholder="数值单位可为空，后期无法更改"
              ></el-input>
            </el-form-item>
            <el-form-item label="设备标识名">
              <el-select v-model="form.region" placeholder="请选择标识名">
                <el-option
                  label="温度传感器"
                  value="温度传感器"
                ></el-option>
                <el-option label="湿度传感器" value="湿度传感器"></el-option>
                <el-option label="红外传感器" value="红外传感器"></el-option>
                <el-option label="火焰传感器" value="火焰传感器"></el-option>
                <el-option label="门磁传感器" value="门磁传感器"></el-option>
                <el-option label="光线传感器" value="光线传感器"></el-option>
              </el-select>
            </el-form-item>
            <el-button type="primary" @click="addordeletelijitijiao()"
              >立即提交</el-button
            >
            <el-button @click="addordeletezhongzhi()">重置</el-button>
          </el-form>
        </el-form>
      </el-form>
    </div>
    <div>
      <el-form class="Addordelete_box">
        <el-form class="Addordelete_box">
          <p>删除设备</p>
          <template>
            <el-table
              ref="multipleTable"
              :data="tableData"
              style="width: 100%"
              tooltip-effect="dark"
              border
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="55" align="center">
              </el-table-column>
              <el-table-column prop="data" label="绑定时间" align="center">
              </el-table-column>
              <el-table-column
                prop="sensor"
                label="设备类型"
                width="120"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="ID"
                label="设备ID"
                show-overflow-tooltip
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="username"
                label="用户ID"
                show-overflow-tooltip
                align="center"
              >
              </el-table-column>
              <el-table-column label="状态可视化" align="center">
                <template slot-scope="scope">
                <el-button type="primary" @click="shishishuju(scope.row)">查看实时动态</el-button>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="150px" align="center">
                <template slot-scope="scope">
                  <el-button
                    type="danger"
                    @click="addordeleteshenchu(scope.row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <div style="margin-top: 20px">
              <el-button @click="xuanzhongquanbu()" type="danger"
                >批量删除</el-button
              >
              <el-button @click="toggleSelection()">取消选择</el-button>
            </div>
          </template>
        </el-form>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      multipleSelection: [],
      form: {
        shebeiid: '',
        company: '',
        region: ''
      }
    }
  },
  created() {
    this.getUserList()
  },
  methods: {
    getTime() {
      var date = new Date()
      var seperator1 = '-'
      var seperator2 = ':'
      // 以下代码依次是获取当前时间的年月日时分秒
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      var strDate = date.getDate()
      var minute = date.getMinutes()
      var hour = date.getHours()
      var second = date.getSeconds()
      // 固定时间格式
      if (month >= 1 && month <= 9) {
        month = '0' + month
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = '0' + strDate
      }
      if (hour >= 0 && hour <= 9) {
        hour = '0' + hour
      }
      if (minute >= 0 && minute <= 9) {
        minute = '0' + minute
      }
      if (second >= 0 && second <= 9) {
        second = '0' + second
      }
      var currentdate =
        year +
        seperator1 +
        month +
        seperator1 +
        strDate +
        ' ' +
        hour +
        seperator2 +
        minute +
        seperator2 +
        second
      return currentdate
    },
    shishishuju(res) {
      this.$router.push('/Realtime') // 路由编程实现跳转
      window.sessionStorage.setItem('shebeiid', res.ID)
    },
    async xuanzhongquanbu() {
      const confirmResult = await this.$confirm(
        '此操作将永久删除选中项, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)
      console.log(confirmResult)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除')
      }
      for (let index = 0; index < this.multipleSelection.length; index++) {
        this.$axios
          .post('http://localhost:3000/api/Stu/delequipment', {
            // 发送请求 跳转页面
            ID: this.multipleSelection[index].ID
          })
          .then(res => {
            console.log(res)
            this.$message.success('删除成功！')
            this.getUserList()
          })
          .catch(res => {
            console.log('错误' + res)
          })
      }
    },
    toggleSelection() {
      this.$refs.multipleTable.clearSelection()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
      console.log(val)
    },
    getUserList() {
      this.$axios
        .get('http://localhost:3000/api/Stu/showequipmentStu')
        .then(response => {
          console.log(response)
          this.tableData = response.data
        })
    },
    addordeletelijitijiao() {
      this.$axios
        .post('http://localhost:3000/api/Stu/addequipment', {
          // 发送请求 跳转页面
          ID: this.form.shebeiid,
          company: this.form.company,
          sensor: this.form.region,
          data: this.getTime(),
          number: '1',
          username: window.sessionStorage.getItem('username')
        })
        .then(res => {
          this.tableData = res.data
          this.getUserList()
          this.$message.success('添加成功！')
        })
        .catch(res => {
          console.log('错误' + res)
          this.$message.console.error('添加失败！')
        })
    },
    addordeletezhongzhi() {
      this.form = {}
    },
    async addordeleteshenchu(res) {
      const confirmResult = await this.$confirm(
        '此操作将永久删除, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)
      console.log(confirmResult)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除')
      }
      this.$axios
        .post('http://localhost:3000/api/Stu/delequipment', {
          // 发送请求 跳转页面
          ID: res.ID
        })
        .then(res => {
          console.log(res)
          this.$message.success('删除成功！')
          this.getUserList()
        })
        .catch(res => {
          console.log('错误' + res)
        })
    }
  }
}
</script>

<style lang="less" scoped>
.Addordelete_div {
  padding-top: 5px;
  padding-bottom: 15px;
  .Addordelete_box1 {
    margin: 5px;
    font-size: 20px;
    background-color: #ffffff;
    padding: 3px 10px 10px 20px;
    border-radius: 10px;
  }
}

.Addordelete_box {
  margin: 5px;
  background-color: #ffffff;
  font-size: 20px;
  padding: 3px 10px 10px 10px;
  border-radius: 10px;
}
</style>
